<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>变化属性-使元素移动(transform attribute - use element translate)</title>
  <!-- 
  transform: translate()  是 CSS 中用于移动元素的属性之一。
  transform: translate()  属性的总结： 
 
    1.  transform: translate(x, y); ：将元素沿着 X 轴和 Y 轴移动指定的距离。 
      -  x ：表示元素沿 X 轴移动的距离，可以为正数（向右移动）或负数（向左移动）。 
      -  y ：表示元素沿 Y 轴移动的距离，可以为正数（向下移动）或负数（向上移动）。 
    
    2.  transform: translateX(x); ：只沿 X 轴移动元素，移动距离为  x 。 
        
    3.  transform: translateY(y); ：只沿 Y 轴移动元素，移动距离为  y 。 
    
    4.  transform: translateZ(z); ：沿 Z 轴移动元素，移动距离为  z 。该属性通常用于 3D 变换。
  -->
  <style>
    .container {
      display: inline-block;
      border: 4px solid skyblue;
    }

    .container > div {
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
  <style>
    .transform-translate-px {
      transform: translate(50px, 50px);
    }

    .transform-translate-percentage {
      /* 
        百分比: 百分比相对于谁, 不同地方的百分比相对参照物不一样的 
          - 设置的x位移: 参考自身的宽度  
          - 设置的y位移: 参考自身的高度
      */
      transform: translate(50%, 50%);
    }
  </style>
</head>
<body>

  <h3>1. transform-translate-px</h3>
  <div class="container">
    <div class="transform-translate-px"></div>
  </div>

  <br>
  <br>
  <br>

  <h3>2. transform-translate-percentage</h3>
  <div class="container">
    <div class="transform-translate-percentage"></div>
  </div>
  
</body>
</html>